<template>
	<view class="step-info">
		<view class="step-number">
			<block v-for="(item, index) in stepList" :key="item.id">
				<view @click.stop="openItem(item, index)" class="item-state">
					<!-- <image class="state-img" :src="getImg(index) || (item.unCheckedImg || unCheckedImg)"></image> -->
					<view class="state-name" :style="{ background: getLine(index) || item.unCheckedLine || unCheckedLine }">{{ index }}</view>
					<view class="step-name">
						<view class="name" :style="{ color: getColor(index) || item.unCheckedColor || unCheckedColor }">
							{{ item.itineraryName }}
						</view>
					</view>
				</view>
				<view class="line" :style="{ background: getLine(index) || item.unCheckedLine || unCheckedLine }" v-if="index < stepList.length - 1"></view>
			</block>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		//当前步骤
		// step: {
		// 	type: Number,
		// 	default: 0
		// },
		//步骤列表
		stepList: {
			type: Array,
			default: null
		},
		// //已完成的图片路径
		// checkedImg: {
		// 	type: String,
		// 	default: '/static/images/index/checkedImg.png'
		// },
		// //未完成的图片路径
		// unCheckedImg: {
		// 	type: String,
		// 	default: '/static/images/index/unCheckedImg.png'
		// },
		//已完成的字体颜色
		checkedColor: {
			type: String,
			default: '#1b7576'
		},
		//未完成的字体颜色
		unCheckedColor: {
			type: String,
			default: '#a1a1a1'
		},
		//已完成的线条颜色
		checkedLine: {
			type: String,
			default: '#1b7576'
		},
		//未完成的线条颜色
		unCheckedLine: {
			type: String,
			default: '#a1a1a1'
		}
	},
	data() {
		return {
			step: 0
		};
	},
	methods: {
		//获取图片
		// getImg(e) {
		// 	let index = Number(e)
		// 	if (this.step > index) return this?.stepList?.[index].checkedImg || this.checkedImg
		// },
		//获取线
		getLine(e) {
			let index = Number(e);
			if (this.step == index) return this?.stepList?.[index].checkedLine || this.checkedLine;
		},
		//获取颜色
		getColor(e) {
			let index = Number(e);
			if (this.step == index) return this?.stepList?.[index].checkedColor || this.checkedColor;
		},
		openItem(item, index) {
			this.step = index;
			this.$emit('clickStep', item);
		}
	}
};
</script>

<style>
.step-info {
	width: 100%;
	height: auto;
}

.step-number {
	width: 100%;
	display: flex;
	/* align-items: center; */
	justify-content: space-between;
}

.item-state {
	/* height: 64rpx; */
}

.state-img {
	width: 64rpx;
	height: 64rpx;
	display: flex;
	margin: auto;
}

.state-name {
	width: 64rpx;
	height: 64rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: auto;
	border-radius: 32rpx;
	font-weight: bold;
	text-align: center;
}

.line {
	width: 100%;
	height: 18rpx;
	background: url(https://nownc178.cq4oss.ctyunxs.cn/index/line.png) !important;
	background-size: contain !important;
	background-repeat: repeat-x !important;
	margin: 26rpx 8rpx;
}

.step-name {
	margin-top: 16rpx;
	width: 120rpx;
	align-items: center;
	justify-content: space-between;
	font-weight: bold;
	text-align: center;
}

.name {
	font-size: 28rpx;
	line-height: 28rpx;
	color: #333333;
}
</style>
